<template>
	<div>
		<!-- 导航栏 -->
		<van-nav-bar class="nav-bar" title="文章详情" border fixed left-arrow @click-left="$router.back()" />
		<!-- /导航栏 -->
		<div style="height: 50px;"></div>

		<div class="container">
			<van-skeleton title avatar :row="6" v-if="!article.author" />

			<div class="article-content" v-else>
				<h1 class="title">{{article.title}}</h1>
				<van-cell center class="user-info">
					<div slot="title" class="name">{{article.author}}</div>
					<van-image slot="icon" class="avatar" round fit="cover" :src="article.avatar" />
					<div slot="label" class="pubdate">{{article.time|formatTime}}</div>
				</van-cell>
				<div class="markdown-body" v-html="article.content"></div>

				<!-- 文章评论列表 -->
				<div class="comment-header">
					<div class="comment-header_title">
						评论：{{article.comment}}
					</div>
					<div class="comment-header_right">
						<span>收藏：{{article.fav}}</span>
						<span>点赞：{{article.like}}</span>
					</div>
				</div>

				<!-- 插槽t-list接收 作用域插槽方式 反传回来的数据			 -->
				<tList ref="commentList" url="/api/get_comment_list" :user_id="user_id" :article_id="article_id">
					<template #content="{list}">
						<van-cell class="comment-item" v-for="(item,index) in list" :key="item._id">
							<van-image slot="icon" class="avatar" round fit="cover"
								:src="item.info&&item.info.avatar" />
							<div slot="title">
								<div class="title-w">
									<div class="name">{{item.info&&(item.info.nickname||item.info.username)}}</div>
									<div class="like-w" @click="comment_like(item,index)">
										<van-icon class="like-icon " :class="item.is_like?'liked':''" name="good-job" />
										<span class="like-count" v-if="item.like_count>0">{{item.like_count}}</span>
									</div>
								</div>
								<div class="content">{{item.content}}</div>
								<div class="info">
									<span class="pubdate">{{item.create_time|formatTime}}</span>
									<van-button @click="reply_open(item,index)" class="reply-btn" round size="mini">
										{{item.reply_num>0?item.reply_num:''}} 回复
									</van-button>
								</div>
							</div>
						</van-cell>
					</template>
				</tList>

				<!-- /文章评论列表 -->
			</div>
		</div>
		<!-- /发布评论-->
		<div class="article-bottom">
			<van-button class="comment-btn" type="default" @click="showPopup(1)" round size="small">发布评论</van-button>
			<van-icon name="comment-o" :badge="article.comment" color="#777" v-if="article.comment>0" />
			<van-icon name="comment-o" color="#777" v-else />
			<!-- //收藏 星星图标-->
			<van-icon name="star" @click="fav" :color="article.is_fav?'#ef092c':'#777'" />
			<van-icon @click="like" :color="article.is_like?'#ef092c':'#777'" name="good-job" />
			<van-icon name="share" @click="showShare = true" color="#777777"></van-icon>
		</div>
		<!-- /// 评论回复-->
		<van-popup v-model="show" position="bottom">

			<div class="post-comment">

				<van-field autofocus v-model="content" rows="4" autosize type="textarea" maxlength="500"
					placeholder="良言一句三冬暖" show-word-limit />
				<div style="width: 100%;">
					<van-button size="large" @click="publish_comment" type="primary">发布</van-button>
				</div>
			</div>
		</van-popup>
		<!-- 评论回复 -->

		<!-- 二级评论 -->
		<van-popup v-model="reply_show" position="bottom" style="height: 100%;">
			<div class="reply_header">
				<div class="close">
					<van-icon name="cross" @click="reply_show=false" />
				</div>
				<h4>{{storage.replay_num>0?storage.replay_num+'条回复':'回复'}}</h4>
			</div>
			<div style="height: 50px;"></div>
			<div class="reply_content">
				<van-cell class="comment-item">
					<van-image slot="icon" class="avatar" round fit="cover" :src="storage.info&&storage.info.avatar" />
					<div slot="title">
						<div class="title-w">
							<div class="name">{{storage.info&&(storage.info.nickname||storage.info.username)}}</div>
							<div class="like-w" @click="comment_like(storage,storage_index)">
								<van-icon class="like-icon " :class="storage.is_like?'liked':''" name="good-job" /><span
									class="like-count" v-if="storage.like_count>0">{{storage.like_count}}</span>
							</div>
						</div>
						<div class="content_content">{{storage.content}}</div>
						<div class="info">
							<span class="pubdate">{{storage.create_time|formatTime}}</span>
						</div>
					</div>
				</van-cell>
			</div>

			<div class="reply_list" style="padding-bottom: 50px;">
				<tList ref="replyList" url="/api/get_reply_list" :reply_comment_id="reply_comment_id" :user_id="user_id"
					:article_id="article_id">
					<template #content="{list}">
						<van-cell class="comment-item" v-for="(item,index) in list" :key="item._id">
							<van-image slot="icon" class="avatar" round fit="cover"
								:src="item.info&&item.info.avatar" />
							<div slot="title">
								<div class="title-w">
									<div class="name">{{item.info&&(item.info.nickname||item.info.username)}}</div>
									<!-- <div class="like-w" @click="comment_like(item,index)">
									<van-icon class="like-icon " :class="item.is_like?'liked':''" name="good-job" />
									<span class="like-count" v-if="item.like_count>0">{{item.like_count}}</span>
								</div> -->
								</div>
								<div class="content">{{item.content}}</div>
								<div class="info">
									<span class="pubdate">{{item.create_time|formatTime}}</span>
								</div>
							</div>
						</van-cell>
					</template>
				</tList>
			</div>

			<!-- ///回复列表底部 -->
			<div class="article-bottom">
				<van-button class="comment-btn" type="default" @click="showPopup(2)" round size="small">
					回复{{storage.info&&storage.info.nickname}}</van-button>
			</div>
		</van-popup>

		<!-- //分享页面 -->
		<van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
	</div>
</template>

<script>
	import '@/utils/github-markdown.css'
	import tList from '@/components/t_list.vue'
	export default {

		data() {
			return {
				show: false,
				content: '', //输入内容
				article_id: '',
				user_id: '',
				article: {},
				reply_show: false, //二级评论 显示 弹框
				reply_comment_id: '', //二级评论回复
				storage: {},
				storage_index: 0,
				showShare: false, //分享显示
				options: [{
						name: 'QQ',
						icon: 'qq'
					},
					{
						name: '微博',
						icon: 'weibo'
					},
					{
						name: '复制链接',
						icon: 'link'
					},
					{
						name: '分享海报',
						icon: 'poster'
					},
					{
						name: '二维码',
						icon: 'qrcode'
					},
				],
			}
		},
		components: {
			tList
		},
		created() {
			let article_id = this.$route.query._id;
			this.article_id = article_id;
			this.user_id = localStorage.getItem('uid')
			this.get_article_detail();
		},
		methods: {
			onSelect(e) {
				console.log(e);
				let {article} =this   

let href = document.location.href;
href = href.replace('#','')

				if (e.name == "QQ") {
					window.open('http://connect.qq.com/widget/shareqq/index.html?url=' + document.location.href +
						'?sharesource=qzone&title=' + article.title + '&pics=' + article.imageSrc[0] + '&desc=莱头条');

				}
				//新浪微博接口的传参
				if (e.name == '微博') {
					window.open('http://service.weibo.com/share/share.php?url=' + href +
						'&sharesource=weibo&title=' + article.title + '&pic=' + article.imageSrc[0] +
						'&appkey=2706825840');
				}
			},
			// 打开二级评论框
			reply_open(item, index) {
				console.log(item)
				console.log(index)



				this.storage = item;
				this.storage_index = index;
				this.reply_show = true;
				this.reply_comment_id = item._id;
				//为何报错
				this.$nextTick(() => {
					this.$refs['replyList'].finised = false;
					this.$refs['replyList'].list = [];

					// this.$refs['replyList'].get_list()
				})

				//每次打开二级评论 把原来二级删除

			},
			//评论点赞
			comment_like(item, index) {
				console.log(item)
				console.log(index)
				if (!this.check_login()) return; //验证先登录才能点赞

				let {
					user_id
				} = this;
				let {
					is_like,
					_id: comment_id
				} = item;
				let request_url = is_like ? '/api/comment_unlike' : '/api/comment_like'
				this.$http.post(request_url, {
					comment_id,
					user_id
				}).then(res => {

					console.log(res);
					if (res.code == 0) {
						this.$toast.success(res.msg);

						// this.article.is_like= !this.article.is_like;
						this.$refs['commentList'].list[index].is_like = !is_like;
						this.$refs['commentList'].list[index].like_count = res.count;

					} else {
						this.$toast.fail(res.msg)
					}
				})

			},

			//评论框
			showPopup(index) {

				if (!this.check_login()) return;
				if (index == 1) {
					this.reply_comment_id = ''
				} else if (index == 2) {
					this.reply_comment_id = this.storage._id; //获取回复过的
				}
				this.show = true;
			},
			///发布评论
			publish_comment() {
				let {
					article_id,
					user_id,
					content
				} = this;
				content = content.trim();
				if (content.length == 0) {
					this.$toast('内容不能为空')
					return
				}


				let {
					reply_comment_id
				} = this;
				this.$http.post('/api/add_comment', {
					article_id,
					user_id,
					content,
					comment_type: reply_comment_id ? 1 : 0,
					reply_comment_id

				}).then(res => {
					console.log(res)

					this.content = '';
					this.show = false;
					if (res.code == 0) {
						this.$toast.success(res.msg)
						if (reply_comment_id) {

							//回复二级评论
							this.$refs['replyList'].finised = false;
							this.$refs['replyList'].list = [];
							this.$refs['replyList'].get_list()
							this.storage.reply_num += 1;
						} else {
							//回复的是文章用这个
							//内容展示
							this.$refs['commentList'].finised = false;
							this.$refs['commentList'].list = [];
							this.$refs['commentList'].get_list()
							this.article.comment += 1;
						}



					} else {
						this.$toast.fail(res.msg)
					}
				})
			},



			//点赞
			like() {
				if (!this.check_login()) return;

				let {
					user_id,
					article_id
				} = this;
				let {
					is_like
				} = this.article;
				let request_url = is_like ? '/api/unlike' : '/api/like'
				this.$http.post(request_url, {
					article_id,
					user_id
				}).then(res => {

					console.log(res);
					if (res.code == 0) {
						this.$toast.success(res.msg);
						// this.get_article_detail()

						this.article.is_like = !this.article.is_like;

					} else {
						this.$toast.fail(res.msg)
					}
				})
			},
			//收藏
			fav() {

				if (!this.check_login()) return;

				let {
					user_id,
					article_id
				} = this;
				let {
					is_fav
				} = this.article;
				let request_url = is_fav ? '/api/remove_fav' : '/api/add_fav';
				this.$http.post(request_url, {
					article_id,
					user_id
				}).then(res => {

					console.log(res);
					if (res.code == 0) {
						this.$toast.success(res.msg);
						// this.get_article_detail()

						this.article.is_fav = !this.article.is_fav;

					} else {
						this.$toast.fail(res.msg)
					}
				})

			},
			get_article_detail() {
				let {
					article_id,
					user_id
				} = this;
				this.$http.post('/api/get_article_detail', {
					article_id,
					user_id
				}).then(res => {
					console.log(res);

					if (res.code == 0) {
						this.article = res.data;

					} else {
						this.$toast(res.msg)
					}
				}).catch(res => {

				})
			}

		},
	}
</script>

<style scoped lang="scss">
	.reply_header {
		position: fixed;
		height: 100px;
		line-height: 100px;
		background: #fff;
		z-index: 999;
		width: 100%;
		text-align: center;
		border-radius: 20px 20px 0 0;
		border-bottom: 1px solid #eee;

		.close {
			position: absolute;
			width: 100px;
			height: 100px;
			display: flex;
			justify-content: center;
			align-items: center;

		}
	}

	.reply_list {
		background: #fff;
		// min-height: 100vh;
		border-top: 1px solid #bbb;
	}

	.comment-header {
		height: 100px;
		padding: 0 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;
		border-top: 1px solid #eee;
		padding-right: 20px;

		.comment-header_title {
			font-size: 28px;
			font-weight: bold;
			color: #333;
		}

		.comment-header_right {
			font-size: 24px;
			color: #999;

			sapn {
				margin-left: 10px;
			}
		}
	}

	.article-content {
		overflow-y: auto;
		padding-bottom: 88px;
		height: calc(100vh - 200px);

		.title {
			font-size: 40px;
			color: #3a3a3a;
			padding: 48px 40px 36px;
			background-color: #fff;
			margin: 0;
		}
	}

	.user-info {
		.avatar {
			width: 72px;
			height: 72px;
			margin-right: 20px;
		}

		.name {
			font-size: 20px;
			color: #333333;
		}

		.pubdate {
			font-size: 20px;
			color: #b4b4b4;
		}

		.follow-btn {
			width: 170px;
			height: 58px;
		}
	}

	ul {
		list-style: unset;
	}

	.markdown-body {
		padding: 14px;
		background-color: #fff;
	}

	.article-bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;
		height: 44px;
		border-top: 1px solid #d8d8d8;
		background-color: #fff;

		.comment-btn {
			width: 200px;
			height: 50px;
			border: 1px solid #eeeeee;
			font-size: 15px;
			line-height: 50px;
			color: #a7a7a7;
		}

		.van-icon {
			font-size: 40px;

			.van-info {
				font-size: 23px;
				background-color: #e22829;
			}
		}
	}

	.comment-item {
		.avatar {
			width: 36px;
			height: 36px;
			margin-right: 13px;
		}

		.name {
			font-size: 16px;
			color: #555;
		}

		.content {
			font-size: 16px;
			color: #222222;
			margin: 10px 0;
		}

		.info {
			display: flex;
			height: 36px;
			align-items: center;
		}

		.pubdate {
			font-size: 20px;
			margin-right: 20px;
		}

		.title-w {
			display: flex;
			justify-content: space-between;
			height: 36px;
			align-items: center;
		}

		.like-w {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.like-icon {
			font-size: 34px;
			color: #999;
		}

		.like-icon.liked {
			color: #ef092c
		}
	}

	.article-bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;
		height: 88px;
		border-top: 1px solid #d8d8d8;
		background-color: #fff;

		.comment-btn {
			width: 400px;
			height: 60px;
			border: 1px solid #eeeeee;
			font-size: 30px;
			line-height: 46px;
			color: #a7a7a7;
		}
	}

	.post-comment {
		padding: 28px;
		display: flex;
		align-items: center;
		flex-wrap: wrap
	}
</style>
